import React, {Component} from 'react';
import {StyleSheet, Text, TouchableOpacity, View,} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import PropTypes from "prop-types";

const styles = StyleSheet.create({
    wrapper: {
        flexDirection: 'row',
        backgroundColor: '#FF6347',
        position: 'absolute',
        zIndex: 999,
        width: '100%',
        height: 40,
        bottom: 0,
    },
    textWrapper: {
        flexDirection: 'row',
        lineHeight: 40
    },
    text: {
        lineHeight: 40,
        color: '#f0f0f0',
        fontSize: 16
    },
    icon: {
        height: 40,
        lineHeight: 40,
        marginLeft: 5,
        marginRight: 5
    },
    left: {
        flex: 1,
        alignItems: 'flex-start',
        paddingLeft: 20
    },
    right: {
        flex: 1,
        alignItems: 'flex-end',
        paddingRight: 20
    },
    center: {
        flex: 1,
        alignItems: 'center'
    },
});

const propTypes = {
    onCatalogPress: PropTypes.func.isRequired,
    onPrevPress: PropTypes.func.isRequired,
    onNextPress: PropTypes.func.isRequired,
};

const defaultProps = {
    onCatalogPress: () => {
    },
    onPrevPress: () => {
    },
    onNextPress: () => {
    },
};


class ReaderControl extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: true,
        };
    }

    render() {
        if (!this.state.visible) {
            return null;
        }
        return (
            <View style={styles.wrapper}>
                <TouchableOpacity
                    activeOpacity={0.7}
                    style={styles.left}
                    onPress={() => {
                        this.props.onPrevPress();
                    }}
                >
                    <View style={styles.textWrapper}>
                        <Icon style={styles.icon} name={'ios-arrow-round-back'} size={30} color={'#f0f0f0'}/>
                        <Text style={styles.text}>上一章</Text>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity
                    activeOpacity={0.7}
                    style={styles.center}
                    onPress={() => {
                        this.props.onCatalogPress();
                    }}
                >
                    <View style={styles.textWrapper}>
                        <Icon style={styles.icon} name={'ios-book'} size={24} color={'#f0f0f0'}/>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity
                    activeOpacity={0.7}
                    style={styles.right}
                    onPress={() => {
                        this.props.onNextPress();
                    }}
                >
                    <View style={styles.textWrapper}>
                        <Text style={styles.text}>下一章</Text>
                        <Icon style={styles.icon} name={'ios-arrow-round-forward'} size={30} color={'#f0f0f0'}/>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

    show = () => {
        this.setState({visible: true});
    };

    hide = () => {
        this.setState({visible: false});
    };
}

export default ReaderControl;